<template>
	<view class="deviceList-container">
		<!-- 搜索框 -->
		<searchBar v-model="searchValue" @search="search" placeholder="输入机柜编号或商户名称" />
		
		<!-- tab类型切换 -->
		<view class="typeTab-box">
			<view @click="switchTab(item)" v-for="item in typeTabList" :key="item.type" :class="{ 'typeTab-item': true, activeTab: currentTab.type == item.type }">
				{{ item.name }}
			</view>
		</view>
		
		<view class="deviceList-box">
			<z-paging ref="paging" :fixed="false" v-model="deviceList" @query="queryList">
				<template #loadingMoreNoMore>
					<div style="text-align: center; color: #999; padding-bottom: 24rpx">没有更多了</div>
				</template>

				<template #empty></template>

				<view v-for="item in 12" :key="item" class="deviceList-item">
					<view class="item-header">
						<view class="deviceNo">设备编号：876543234567</view>
						<view class="deviceInstall status">已安装</view>
						<view v-if="false" class="deviceUnInstall status"></view>
					</view>
					<view class="item-body">
						<view class="body-title">
							<view v-if="true" class="device-type status acvive">快充</view>
							<view v-if="false" class="device-type status">慢充</view>
							<view v-if="true" class="device-online status acvive">在线</view>
							<view v-if="false" class="device-online status">离线</view>
						</view>
						<view class="body-body">
							<view class="body-line">
								<view class="line-label">商户名称</view>
								<view class="line-value">奶茶店</view>
							</view>
							<view class="body-line">
								<view class="line-label">安装时间</view>
								<view class="line-value">2024-12-12</view>
							</view>
							<view class="body-line">
								<view class="line-label">安装天数</view>
								<view class="line-value">30天</view>
							</view>
						</view>
					</view>
					<view class="body-footer">
						<view class="btn">解绑设备</view>
					</view>
				</view>
			</z-paging>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import searchBar from '@/subPages/components/cds-searchBar/index.vue';

// 类型切换列表
const currentTab = ref({ type: 0 });
const typeTabList = ref([
	{
		name: '全部',
		type: 0
	},
	{
		name: '待安装',
		type: 1
	},
	{
		name: '有设备',
		type: 2
	},
	{
		name: '无订单',
		type: 3
	}
]);

// 切换tab类型
const switchTab = (item) => {
	currentTab.value = item;
};

// 搜索框内容
const searchValue = ref('');
const search = (e) => {
	searchValue.value = e;
};

// 设备列表
const deviceList = ref([]);

// 查询设备列表
const paging = ref(null);
const queryList = (pageNo, pageSize) => {
	console.log(pageNo, pageSize);
	paging.value.complete([1, 2, 3, 4]);
};
</script>

<style lang="scss" scoped>
.deviceList-container {
	height: 100vh;
	padding: 24rpx;
	background-color: #f9f9f9;
	
	.typeTab-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 24rpx 0;
	
		.typeTab-item {
			display: flex;
			align-items: center;
			justify-content: center;
			color: #333;
			width: 156rpx;
			height: 52rpx;
			border-radius: 30rpx;
			background-color: #fff;
		}
	
		.activeTab {
			color: #fff;
			background-color: $uni-main-color;
		}
	}

	.deviceList-box {
		height: calc(100vh - 48rpx - 88rpx - 52rpx - 48rpx);

		::-webkit-scrollbar {
			display: none;
			width: 0 !important;
			height: 0 !important;
			-webkit-appearance: none;
			background: transparent;
		}

		.deviceList-item {
			border-radius: 24rpx;
			padding: 32rpx 24rpx 24rpx;
			background-color: #fff;
			margin-bottom: 24rpx;

			.item-header {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-bottom: 24rpx;
				border-bottom: 2rpx solid #f0f0f0;

				.deviceNo {
					color: #333;
					font-weight: 500;
					font-size: 28rpx;
					line-height: 40rpx;
				}

				.status {
					display: flex;
					flex-wrap: nowrap;
					align-items: center;
					justify-content: center;
					width: 84rpx;
					height: 32rpx;
					font-size: 20rpx;
					border-radius: 6rpx;
				}

				.deviceInstall {
					color: $uni-main-color;
					background-color: rgba(0, 197, 130, 0.12);
				}

				.deviceUnInstall {
					color: #999;
					background-color: rgba(153, 153, 153, 0.12);
				}
			}

			.item-body {
				padding: 24rpx 0;

				.body-title {
					display: flex;
					gap: 24rpx;
					flex-wrap: nowrap;
					align-items: center;
					margin-bottom: 20rpx;

					.status {
						color: #999;
						background-color: rgba(153, 153, 153, 0.12);
						font-size: 20rpx;
						line-height: 32rpx;
						padding: 0 12rpx;
						border-radius: 6rpx;
					}

					.acvive {
						color: $uni-main-color;
						background-color: rgba(0, 197, 130, 0.12);
					}
				}

				.body-body {
					display: flex;
					flex-direction: column;
					gap: 20rpx;

					.body-line {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.line-label,
						.line-value {
							font-size: 28rpx;
							line-height: 40rpx;
						}

						.line-label {
							color: #999;
						}

						.line-value {
							color: #333;
						}
					}
				}
			}

			.body-footer {
				display: flex;
				flex-wrap: nowrap;
				align-items: center;
				justify-content: flex-end;
				padding-top: 20rpx;
				border-top: 2rpx solid #f0f0f0;

				.btn {
					display: flex;
					flex-wrap: nowrap;
					align-items: center;
					justify-content: center;
					color: #fff;
					font-size: 28rpx;
					line-height: 40rpx;
					padding: 8rpx 16rpx;
					border-radius: 12rpx;
					background-color: $uni-main-color;
				}
			}
		}
	}
}
</style>
